<template>
	<view class='form'>
		<uni-forms ref="form" :rules="rules" :modelValue="formData">
			<uni-forms-item label="账号" name="username">
				<uni-easyinput v-model="username" disabled placeholder="请输入账号" />
			</uni-forms-item>
			<uni-forms-item label="单位" name="company">
				<uni-easyinput v-model="formData.company" disabled placeholder="请输入单位" />
			</uni-forms-item>
			<uni-forms-item label="姓名" name="nickname">
				<uni-easyinput v-model="formData.nickname" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="联系电话" name="tel">
				<uni-easyinput v-model="formData.tel" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item label="部门" name="deptName">
				<picker :range='deptoptions' range-key="name" @change='deptpicker' :value="index">
					<view class='dept'>{{deptName}}</view>
				</picker>
			</uni-forms-item>

		</uni-forms>
		<view style="margin: 16px">
			<van-button round block type="info" @click="submit"> 确定 </van-button>
		</view>
	</view>
</template>

<script>
	import {
		getDepartment,
		updateUserInfo,
		getAllUsers
	} from '@/api/changeUserInfo/index.js'
	export default {
		data() {
			return {
				rules: {
					nickname: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}],
						validateTrigger:"bind"
					},
					tel: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								errorMessage: '请输入正确格式的手机号',
							}
						],
						validateTrigger:"bind"
					}
				},
				formData: {
					nickname: '',
					company: '北京武警总队',
					tel: '',
					deptname_id: ''
				},
				username: '',
				deptName: '',
				deptoptions: [],
				index: 0,
				temDepartInfo: {}, // id - number , name - string
			}
		},
		computed: {
			departName() {
				return ''
			},

		},
		onShow(){
			this.init()
		},
		methods: {
			init(){
				const user=uni.getStorageSync("user")
				this.username=user.username
				this.formData.nickname=user.nickname
				this.formData.tel=user.tel
				this.deptName=user.deptName||'无'
			},
			submit() {
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: '提交中'
					});
					this.updateUserInfo()
					// console.log(this.temDepartInfo.id,'id')
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			onchange(e) {
				console.log(e.detail.value, 'change')
			},
			deptpicker({
				detail
			}) {
				const index = detail.value
				this.deptName = this.deptoptions[index].name
				this.temDepartInfo = this.deptoptions[index]
			},
			updateUserInfo() {
				const id = uni.getStorageSync('user').id
				this.formData.deptname_id = this.temDepartInfo.id || ''
				updateUserInfo({
					...this.formData,
					id
				}).then((re) => {
					getAllUsers()
					if (re.code == 10000) {
						const {company,deptName,head_ico,nickname,tel}=re.data
						const user=uni.getStorageSync("user")
						user.nickname=nickname
						user.tel=tel
						user.deptName=deptName
						uni.setStorageSync('user',user)
						uni.switchTab({
							url: '../personal/personal'
						})
					}
					setTimeout(() => {
						uni.showToast({
							title: re.msg
						})
						uni.hideLoading()
					}, 1000)

				})

			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '修改用户信息'
			});
			this.$refs.form.setRules(this.rules)
			getDepartment().then((re) => {
				const departList = re.data || []
				this.deptoptions = Object.keys(departList).reduce((acc, cur) => acc = [...acc, {
					id: cur,
					name: departList[cur]
				}], [])
				for (let key in re.data) {
					console.log(re.data[key], 123)
				}
			})

		},
	}
</script>

<style scoped>
	.form {
		padding: 10px;
	}

	.dept {
		border: 1px solid #c8c7cc;
		border-radius: 4px;
		height: 36px;
		line-height: 36px;
		padding-left: 10px;
	}
</style>
